<template>
  <div class="page page-poetry-index p-5">
    <div class="px-4">
      <!-- 顶部banner -->
      <div class="banner">
        <div class="banner-content">
          <h1>中国古诗词库</h1>
          <p>传承千年文化，品味诗词之美</p>
        </div>
      </div>
      
      <!-- 筛选区域 -->
      <div class="filter-section p-t-10">
        <!-- 类型筛选 -->
        <div class="filter-item">
          <div class="filter-title">类型：</div>
          <div class="filter-options">
            <span 
              v-for="(item, index) in poetryTypes" 
              :key="'type-' + index" 
              @click="selectType(item)"
              :class="{ active: selectedType === item }">
              {{ item }}
            </span>
          </div>
        </div>
        
        <!-- 作者筛选 -->
        <div class="filter-item">
          <div class="filter-title">作者：</div>
          <div class="filter-options">
            <span 
              v-for="(item, index) in poetryAuthors" 
              :key="'author-' + index" 
              @click="selectAuthor(item)"
              :class="{ active: selectedAuthor === item }">
              {{ item }}
            </span>
          </div>
        </div>
        
        <!-- 朝代筛选 -->
        <div class="filter-item">
          <div class="filter-title">朝代：</div>
          <div class="filter-options">
            <span 
              v-for="(item, index) in poetryDynasties" 
              :key="'dynasty-' + index" 
              @click="selectDynasty(item)"
              :class="{ active: selectedDynasty === item }">
              {{ item }}
            </span>
          </div>
        </div>
        
        <!-- 年级筛选 -->
        <div class="filter-item">
          <div class="filter-title">年级：</div>
          <div class="filter-options">
            <span 
              v-for="(item, index) in poetryGrades" 
              :key="'grade-' + index" 
              @click="selectGrade(item)"
              :class="{ active: selectedGrade === item }">
              {{ item }}
            </span>
          </div>
        </div>
        
        <!-- 关键词搜索 -->
        <div class="search-box">
          <el-input 
            v-model="keyword" 
            @keyup.enter="searchPoetry" 
            placeholder="请输入诗词关键词"
            size="large">
            <template #prepend>
              <el-button :icon="ElIconSearch" @click="searchPoetry" />
            </template>
          </el-input>
          <el-button type="primary" size="large" @click="searchPoetry">搜索</el-button>
        </div>
      </div>
      
      <!-- 诗词列表 -->
      <div class="poetry-list">
        <div class="poetry-cards">
          <div class="poetry-card" v-for="(item, index) in poetryList" :key="'poetry-' + index" @click="viewPoetryDetail(item)">
            <div class="card-content">
                  <!-- 添加勋章元素 -->
    <div class="poetry-medal" :class="item.workinfos && item.workinfos.length > 0 ? 'has-illustration' : 'no-illustration'">
      {{ item.workinfos && item.workinfos.length > 0 ? '已配图' : '未配图' }}
    </div>
              <div class="card-header">
                <h3 class="card-title">{{ item.title }}</h3>
                <div class="card-author">{{ item.author }}</div>
              </div>
              <div class="card-body">
                <div class="content-text" v-if="item.content">
                  <p v-for="(line, lIndex) in item.content.split('。')" :key="lIndex">{{ line }}</p>
                </div>
                <div class="divider"></div>
                <div class="card-footer">
                  <div class="card-tags" v-if="item.typeTag">
                    <span v-for="(tag, tagIndex) in item.typeTag.split(',')" :key="'tag-' + tagIndex">{{ tag }}</span>
                  </div>
                  <div class="dynasty-tag" v-if="item.dynastyTag">{{ item.dynastyTag }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载状态 -->
        <div class="loading-container" v-if="pending">
          <el-skeleton animated :rows="5" />
        </div>
        
        <!-- 空数据提示 -->
        <div class="empty-data" v-else-if="poetryList.length === 0">
          <el-empty description="暂无数据" />
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container" v-if="!pending && poetryList.length > 0">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { Search as ElIconSearch } from '@element-plus/icons-vue';
import { postAIPublicIllustrationPosterPage } from '../../service/yapi';
import { useRouter } from 'vue-router';

const router = useRouter();

// 诗词类型数据
const poetryTypes = ref([
  '全部',  "思乡", "月亮", "春天", "田园", "哲理", "登高",  
  "山水", "夸张", "冬天", "隐逸", "亲情", "感恩",
]);

// 作者数据
const poetryAuthors = ref([
  '全部',   "李白", "孟浩然", "王之涣", "柳宗元", "孟郊", "张继", "白居易", "王维", "杜牧",  


]);

// 朝代数据
const poetryDynasties = ref([
  '全部', '唐代', '宋代'
]);

// 年级数据
const poetryGrades = ref([
  '全部', "一年级", "二年级", "三年级", "四年级", 
  "五年级", "六年级", "初中一年级", 
  "初中二年级", "初中三年级"
]);

// 筛选条件
const selectedType = ref('全部');
const selectedAuthor = ref('全部');
const selectedDynasty = ref('全部');
const selectedGrade = ref('全部');
const keyword = ref('');
const pending = ref(false);

// 分页参数
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
});

// 诗词列表
const poetryList = ref<any[]>([]);

// 构建请求参数
const buildRequestParams = () => {
  return {
    page: pagination.page,
    size: pagination.size,
    keyWord: keyword.value,
    typeTag: selectedType.value !== '全部' ? selectedType.value : '',
    authorTag: selectedAuthor.value !== '全部' ? selectedAuthor.value : '',
    dynastyTag: selectedDynasty.value !== '全部' ? selectedDynasty.value : '',
    gradeTag: selectedGrade.value !== '全部' ? selectedGrade.value : ''
  };
};

// 筛选方法
const selectType = (type: string) => {
  selectedType.value = type;
  resetPage();
  getPoetryList();
};

const selectAuthor = (author: string) => {
  selectedAuthor.value = author;
  resetPage();
  getPoetryList();
};

const selectDynasty = (dynasty: string) => {
  selectedDynasty.value = dynasty;
  resetPage();
  getPoetryList();
};

const selectGrade = (grade: string) => {
  selectedGrade.value = grade;
  resetPage();
  getPoetryList();
};

const searchPoetry = () => {
  resetPage();
  getPoetryList();
};

// 重置分页
const resetPage = () => {
  pagination.page = 1;
};

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size;
  getPoetryList();
};

const handleCurrentChange = (page: number) => {
  pagination.page = page;
  getPoetryList();
};

// 获取诗词列表
const getPoetryList = async () => {
  try {
    pending.value = true;
    const params = buildRequestParams();
    const response = await postAIPublicIllustrationPosterPage(params);
    
    if (response && response.code === 1000) {
      poetryList.value = response.data.list || [];
      pagination.total = response.data.pagination?.total || 0;
    } else {
      ElMessage.error('获取诗词列表失败');
      poetryList.value = [];
      pagination.total = 0;
    }
  } catch (error) {
    console.error('获取诗词列表出错:', error);
    ElMessage.error('获取诗词列表出错');
    poetryList.value = [];
    pagination.total = 0;
  } finally {
    pending.value = false;
  }
};

// 查看诗词详情
const viewPoetryDetail = (item: any) => {
  router.push(`/illustration/detail/${item.id}`);
};

// 初始数据获取（服务端渲染）
const { data: initialData } = useAsyncData('poetry-list', async () => {
  try {
    const params = buildRequestParams();
    return await postAIPublicIllustrationPosterPage(params);
  } catch (error) {
    console.error('服务端获取诗词数据失败:', error);
    return { code: -1, data: { list: [], pagination: { total: 0 } } };
  }
}, {
  server: true,
  lazy: false
});

// 监听初始数据变化
watch(initialData, (newData) => {
  if (newData && newData.code === 1000) {
    poetryList.value = newData.data.list || [];
    pagination.total = newData.data.pagination?.total || 0;
  }
}, { immediate: true });

// 客户端页面加载
onMounted(() => {
  window.scrollTo(0, 0);
  
  // 如果没有通过服务端获取到数据，则在客户端重新获取
  if (poetryList.value.length === 0) {
    // getPoetryList();
  }
});

definePageMeta({ auth: false });
</script>

<style lang="scss" >
.page-poetry-index {
  // background-image: url('/images/paper-texture.png'); // 需要添加一张纸纹理背景
  background-color: #f9f6f0;
  min-height: 100vh;
  .el-input__wrapper.is-focus{
    box-shadow:0 0 0 1px #73341d inset
  }
  .el-pager li.is-active{
    color: #73341d;
  }
  .banner {
    height: 300px;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), no-repeat center center; // 更换为水墨山水图
    // background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
    //             url('/images/chinese-landscape.jpg') no-repeat center center; // 更换为水墨山水图
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 40px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('/images/ink-border.png'); // 水墨边框装饰
      background-size: 100% 100%;
      opacity: 0.7;
      pointer-events: none;
    }
    
    .banner-content {
      text-align: center;
      position: relative;
      padding: 20px;
      
      h1 {
        font-size: 46px;
        margin-bottom: 16px;
        font-family: "SimSun", "宋体", serif;
        letter-spacing: 8px;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        
        &::after {
          content: '';
          display: block;
          width: 60px;
          height: 3px;
          background: #fff;
          margin: 15px auto 5px;
        }
      }
      
      p {
        font-size: 20px;
        opacity: 0.85;
        font-family: "KaiTi", "楷体", serif;
        letter-spacing: 2px;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
      }
    }
  }
  
  .filter-section {
    background: rgba(245, 240, 230, 0.8);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e8e0d0;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px dashed #d5c9b1;
      border-radius: 4px;
      pointer-events: none;
    }
    
    .filter-item {
      display: flex;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      
      .filter-title {
        width: 70px;
        font-weight: 500;
        line-height: 32px;
        color: #73341d;
        font-family: "KaiTi", "楷体", serif;
        font-size: 18px;
      }
      
      .filter-options {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        
        span {
          padding: 6px 15px;
          margin: 0 12px 12px 0;
          background: #fff;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;
          border: 1px solid #e8e0d0;
          font-family: "SimSun", "宋体", serif;
          
          &:hover {
            background: #f3ece0;
            border-color: #d5c9b1;
          }
          
          &.active {
            background: #8c7454;
            color: #fff;
            border-color: #73341d;
          }
        }
      }
    }
    
    .search-box {
      display: flex;
      margin-top: 20px;
      position: relative;
      z-index: 1;
      
      :deep(.el-input) {
        margin-right: 15px;
        flex: 1;
        
        .el-input__wrapper {
          background: #fff;
          border: 1px solid #e8e0d0;
        }
      }
      
      :deep(.el-button) {
        background: #8c7454;
        border-color: #73341d;
        
        &:hover {
          background: #73341d;
        }
      }
    }
  }
  
  .poetry-list {
    margin-bottom: 40px;
    
    .poetry-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .poetry-card {
      width: calc(25% - 15px);
      background-color: #fcf9f2;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s;
      // overflow: hidden;
      border: 1px solid #e8e0d0;
      position: relative;
      margin-bottom: 5px;
      
      // 添加古典卷轴装饰
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        // background-image: url('/images/corner-decoration.png'); // 需添加角落装饰
        background-size: cover;
        opacity: 0.4;
        pointer-events: none;
      }

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(115, 52, 29, 0.15);
      }
      .poetry-medal {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 12px;
      font-weight: bold;
      transform: rotate(15deg);
      z-index: 5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      font-family: "KaiTi", "楷体", serif;
      letter-spacing: 1px;
      
      &::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, 0.5);
      }
      
      &.has-illustration {
        background: linear-gradient(45deg, #a32c2c, #c13e39);
        color: #fff;
        border: 2px solid #731f1a;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 30px;
          height: 30px;
          // background-image: url('/images/stamp-pattern.png'); // 印章图案纹理背景
          background-size: cover;
          opacity: 0.2;
        }
      }
      
      &.no-illustration {
        background: linear-gradient(45deg, #8e8e8e, #ababab);
        color: #fff;
        border: 2px solid #707070;
        opacity: 0.8;
      }
    }

    &:hover .poetry-medal {
      // transform: rotate(0);
      transition: transform 0.3s ease-in-out;
    }
      .card-content {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .card-header {
        padding: 10px 12px;
        text-align: center;
        border-bottom: 1px solid #e8e0d0;
        background-color: #f5efe5;
        position: relative;
        
        // 添加水墨横线装饰
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 20%;
          right: 20%;
          height: 1px;
          background: linear-gradient(to right, transparent, #c0b9a9, transparent);
        }

        .card-title {
          font-size: 18px;
          font-weight: 500;
          color: #73341d;
          margin: 0 0 8px;
          letter-spacing: 2px;
          font-family: "SimSun", "宋体", serif;
        }

        .card-author {
          font-size: 13px;
          color: #8c7c64;
          font-family: "KaiTi", "楷体", serif;
        }
      }

      .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 16px 12px;

        .content-text {
          flex: 1;
          font-size: 14px;
          color: #4a4a4a;
          line-height: 1.7;
          text-align: center;
          margin-bottom: 16px;
          font-family: "FangSong", "仿宋", serif;
          letter-spacing: 1px;
          
          p {
            margin: 6px 0;
          }
        }

        .divider {
          width: 50%;
          height: 1px;
          background: #e8e0d0;
          margin: 15px auto;
          position: relative;
          
          &::before,
          &::after {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #c0b9a9;
            position: absolute;
            top: -2.5px;
          }
          
          &::before {
            left: -3px;
          }
          
          &::after {
            right: -3px;
          }
        }

        .card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            span {
              background: #f0e9df;
              border-radius: 12px;
              padding: 4px 10px;
              font-size: 12px;
              color: #73341d;
              border: 1px solid #e8e0d0;
            }
          }

          .dynasty-tag {
            font-size: 12px;
            color: #8c7c64;
            background: #f0ebe1;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid #e8e0d0;
          }
        }
      }
    }

    .empty-data {
      padding: 60px 0;
      text-align: center;
      
      :deep(.el-empty) {
        padding: 40px 0;
        
        .el-empty__description p {
          color: #8c7c64;
          font-family: "KaiTi", "楷体", serif;
        }
      }
    }
    
    .loading-container {
      padding: 40px 0;
    }
  }
  
  // 自适应布局
  @media (max-width: 1200px) {
    .poetry-list .poetry-card {
      width: calc(33.333% - 15px);
    }
  }
  
  @media (max-width: 992px) {
    .poetry-list .poetry-card {
      width: calc(50% - 15px);
    }
  }
  
  @media (max-width: 768px) {
    .poetry-list .poetry-card {
      width: 100%;
    }
    
    .banner {
      height: 200px;
      
      .banner-content h1 {
        font-size: 32px;
      }
    }
    
    .filter-section {
      padding: 15px;
      
      .filter-item {
        flex-direction: column;
        
        .filter-title {
          width: 100%;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
